<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #737373;
    background-color: white;
    margin: 10px 13px 10px 13px;
}
table {
	margin: 10px 0 15px 0;
	border-collapse: collapse;
}
td,th {	
	border: 1px solid #ddd;
	padding: 3px 10px;
}
th {
	padding: 5px 10px;	
}

a {
    color: #0069d6;
}
a:hover {
    color: #0050a3;
    text-decoration: none;
}
a img {
    border: none;
}
p {
    margin-bottom: 9px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #404040;
    line-height: 36px;
}
h1 {
    margin-bottom: 18px;
    font-size: 30px;
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 18px;
}
h4 {
    font-size: 16px;
}
h5 {
    font-size: 14px;
}
h6 {
    font-size: 13px;
}
hr {
    margin: 0 0 19px;
    border: 0;
    border-bottom: 1px solid #ccc;
}
blockquote {
    padding: 13px 13px 21px 15px;
    margin-bottom: 18px;
    font-family:georgia,serif;
    font-style: italic;
}
blockquote:before {
    content:"\201C";
    font-size:40px;
    margin-left:-10px;
    font-family:georgia,serif;
    color:#eee;
}
blockquote p {
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    margin-bottom: 0;
    font-style: italic;
}
code, pre {
    font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
    background-color: #fee9cc;
    color: rgba(0, 0, 0, 0.75);
    padding: 1px 3px;
    font-size: 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
pre {
    display: block;
    padding: 14px;
    margin: 0 0 18px;
    line-height: 16px;
    font-size: 11px;
    border: 1px solid #d9d9d9;
    white-space: pre-wrap;
    word-wrap: break-word;
}
pre code {
    background-color: #fff;
    color:#737373;
    font-size: 11px;
    padding: 0;
}
sup {
    font-size: 0.83em;
    vertical-align: super;
    line-height: 0;
}
* {
	-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
    body {
        width: 854px;
        margin:10px auto;
    }
}
@media print {
	body,code,pre code,h1,h2,h3,h4,h5,h6 {
		color: black;
	}
	table, pre {
		page-break-inside: avoid;
	}
}
</style>
<title>React-Native入门指南</title>

</head>
<body>
<h1>React-Native入门指南</h1>

<h2>第4篇React-Native布局实战</h2>

<pre><code>前辈教导我们，掌握一门新技术的最快方法是练习。因此，我找了下比较有爱，暖气的界面。当然不是给美团打广告了，只是觉得页面蛮清新的。下面就是要显示的效果：
</code></pre>

<p><img src="pic/4_1.png" alt="美团" /></p>

<pre><code>第三篇文章基本上对React-Native的布局基本上有个大致的认识，现在开工吧。总体上，该页面分三个部分：（1）我们约会吧及其右边3栏；（2）1元吃大餐及其底下的4栏；（3）红火来袭的三栏。
</code></pre>

<h4>一、实现第一部分</h4>

<pre><code>1、首先，我们创建一个项目
现在我们需要创建一个React-Native的项目，因此可以按照下面的步骤：
打开终端，开始React-Native开发的旅程吧。
(1)安装命令行工具(已经安装了就不用再安装了)：sudo npm install -g react-native-cli
(2)创建一个空项目：react-native init HelloWorld
(3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
(4)在xcode中，使用快捷键cmd + R即可启动项目。

2、清除其余多余的代码,剩下的代码如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;


var HelloWorld = React.createClass({
    render: function() {
        return (
            &lt;View&gt;&lt;/View&gt;
        );
    }
});
var styles = StyleSheet.create({

});


AppRegistry.registerComponent('HelloWorld', () =&gt; HelloWorld);

3、此时，除了闪屏外，看到应该是空白的页面。开工，分析页面：
（1）大致有4个板块
（2）先是左右两栏(1/3和2/3)；后是上下两栏(1/2)。我们先用View组件布局。
</code></pre>

<p><img src="pic/4_2.png" alt="美团" /></p>

<pre><code>4、完成初步布局
看如下代码，应该很清楚了，View里面嵌入并列的两栏。
</code></pre>

<p><img src="pic/4_3.png" alt="美团" /></p>

<pre><code>实现效果如下：
</code></pre>

<p><img src="pic/4_4.png" alt="美团" /></p>

<pre><code>5、添加内部图片和文字
其实做这种布局，还是有很多的细节，粗糙的效果如下,这块代码暂时不贴了，最后一并贴出来：
</code></pre>

<p><img src="pic/4_5.png" alt="美团" /></p>

<h4>二、按照第一部分原理，完成整个页面</h4>

<pre><code>完成的效果如下：
</code></pre>

<p><img src="pic/4_6.png" alt="美团" /></p>

<pre><code>整个代码如下：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
} = React;


var HelloWorld = React.createClass({
    render: function() {
        return (
            &lt;View style={{}}&gt;
                &lt;View style={[styles.height160, styles.row,]}&gt;
                &lt;View style={[styles.height160, styles.part_1_left,]}&gt;
                &lt;Text style={[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}&gt;我们约吧&lt;/Text&gt;
                &lt;Text style={[styles.font10, styles.marTop14, styles.marLeft10]}&gt;恋爱家人好朋友&lt;/Text&gt;
                &lt;Image style={[styles.yue]} source={{uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}}&gt;&lt;/Image&gt;
            &lt;/View&gt;
            &lt;View style={[styles.height160, styles.part_1_right,]}&gt;
            &lt;View style={[styles.row, {flex:1}]}&gt;
            &lt;View style={{flex:1}}&gt;
              &lt;Text style={[styles.font14, {marginLeft:30}, styles.red]}&gt;超低价值&lt;/Text&gt;
              &lt;Text style={[styles.font14, {fontSize:12, marginTop:14, marginLeft:30,color: 'black'}]}&gt;十元惠生活&lt;/Text&gt;
            &lt;/View&gt;
            &lt;View style={[{flex:1}, {marginTop:-13}]}&gt;
              &lt;Image style={[styles.hanbao]} source={{uri: 'http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg'}}&gt;&lt;/Image&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          &lt;View style={[{flex:1, flexDirection: 'row',borderTopWidth:0.5, borderColor:'#DDD8CE'}]}&gt;
            &lt;View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE',}}&gt;
                &lt;Text style={{color:'#F742AB', marginLeft:5,fontWeight:'bold', fontSize:15, marginTop:8}}&gt;聚餐宴请&lt;/Text&gt;
                &lt;Text style={{fontSize:12,marginTop:4, marginLeft:5}}&gt;朋友家人常聚聚&lt;/Text&gt;
                &lt;Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}&gt;&lt;/Image&gt;
            &lt;/View&gt;
            &lt;View style={{flex:1,}}&gt;
                &lt;Text style={[styles.font14,{color:'#FF8601', marginTop:8, marginLeft:5}]}&gt;名店抢购&lt;/Text&gt;
                &lt;Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}&gt;还有&lt;/Text&gt;
                &lt;Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}&gt;12:06:12分&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
    &lt;/View&gt;
    &lt;View&gt;
      &lt;View style={{borderBottomWidth:1,borderTopWidth:1, borderColor:'#DDD8CE', marginTop:40,height:65, flexDirection: 'row',paddingTop:10}}&gt;
        &lt;View style={[{flex:1}]}&gt;
            &lt;Text style={{fontSize:17, color:'#FF7F60', fontWeight:'900', marginLeft:7}}&gt;一元吃大餐&lt;/Text&gt;
            &lt;Text style={{marginLeft:7, fontSize:12, marginTop:3}}&gt;新用户专享&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={{flex:1}}&gt;
            &lt;Image style={{height:50, width:120}} source={{uri:'http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg'}}&gt;&lt;/Image&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;
    &lt;View&gt;
      &lt;View style={{flexDirection: 'row',}}&gt;
        &lt;View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1}]}&gt;
          &lt;View style={{flex:1,}}&gt;
            &lt;Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}&gt;撸串节狂欢&lt;/Text&gt;
            &lt;Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}&gt;烧烤6.6元起&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{flex:1}}&gt;
            &lt;Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png'}}&gt;&lt;/Image&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;View style={styles.row}&gt;
          &lt;View style={{flex:1}}&gt;
            &lt;Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}&gt;毕业旅行&lt;/Text&gt;
            &lt;Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}&gt;选好酒店才安心&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{flex:1}}&gt;
            &lt;Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg'}}&gt;&lt;/Image&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
      &lt;View style={{flexDirection: 'row',}}&gt;
        &lt;View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1,  marginLeft:1},]}&gt;
          &lt;View style={{flex:1}}&gt;
            &lt;Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}&gt;0元餐来袭&lt;/Text&gt;
            &lt;Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}&gt;免费吃喝玩乐购&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{flex:1}}&gt;
            &lt;Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png'}}&gt;&lt;/Image&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;View style={styles.row}&gt;
          &lt;View style={{flex:1}}&gt;
            &lt;Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}&gt;热门团购&lt;/Text&gt;
            &lt;Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}&gt;大家都在买什么&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{flex:1}}&gt;
            &lt;Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png'}}&gt;&lt;/Image&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;/View&gt;
);
}
});


var styles = StyleSheet.create({
    row:{
    flexDirection: 'row',
    paddingTop:20
},
marTop18:{
    marginTop:18,
},
marTop14:{
    marginTop:14,
},
font14:{
    fontSize:14,
},
font10:{
    fontSize:12,
},
height160:{
    height: 160
},
yue:{
    height:80,
},
green:{
    color:'#55A44B',
    fontWeight: '900'
},
red:{
    color: '#FF3F0D',
    fontWeight: '900'
},
marLeft10:{
    marginLeft:10,
},
part_1_left:{
    flex: 1,
    borderColor: '#DCD7CD',
    borderRightWidth: 0.5,
    borderBottomWidth: 1,
},
part_1_right:{
    flex:2,
    borderColor: '#DCD7CD',
    borderBottomWidth: 1,
},
hanbao:{
    height:55,
    width:55
}
});


AppRegistry.registerComponent('HelloWorld', () =&gt; HelloWorld);
</code></pre>
</body>
</html>